import React, {Component} from 'react'
import {observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import {DateSwitch} from 'weaver-mobile';
import { MapPage } from "weaver-mobile-page";

@withRouter
@observer
export default class Map extends Component {
  componentDidMount(){
    this.props.store.init();
  }

  amapEvents = {
    created: instance => {
        const {store} = this.props;
        const {mapUtil} = store;
        mapUtil.mapInstance = instance;
        store.initMap(this.draw);
    },
  }

  initEndCallback = () => {
    const {store} = this.props;
    const {mapUtil} = store;
    mapUtil.mapInited = true;
    store.initMap(this.draw);
  }

  draw = () => {
    const {store} = this.props;
    const {mapDatas, mapUtil} = store;
    const {isAmap, isGoogleMap, clearMapData, addMarker, addPolyline, setFitView} = mapUtil;
    //清理地图数据
    clearMapData();
    //自适应数据
    const boundDatas = [];
    const polylinePath = [];
    //添加marker
    mapDatas.map((d, i) => {
      const {longitude, latitude} = d.position || {};
      if(longitude && latitude){
        const otherParams = {};
        isAmap && Object.assign(otherParams, {offset: new window.AMap.Pixel(-17, -34), content: `<div class='markerContent markerRBg'>${i + 1}</div>`});
        isGoogleMap && Object.assign(otherParams, {label:{text:String(i + 1), color:'#fff'}});
        const marker = addMarker({latitude, longitude}, null, null, otherParams);
        isAmap && boundDatas.push(marker) && polylinePath.push([longitude, latitude]);
        isGoogleMap && boundDatas.push({latitude, longitude}) && polylinePath.push({lat:Number(latitude), lng:Number(longitude)});
      }
    })
    //添加polyline
    polylinePath.length > 0 && addPolyline(polylinePath);
    //地图元素自适应
    setFitView(boundDatas);
  }

  render() {
    const {store} = this.props;
    const {searchDate, onDateChangeHandle, mapUtil, onMapTypeChangeHandle: callback} = store;
    const {mapStore, isAmap, isGoogleMap, onMapTypeChangeHandle} = mapUtil;
    const mapProps = {store: mapStore, showIntroduction: false, onMapSwitch: type => onMapTypeChangeHandle(type, callback)};
    if(isAmap){
        Object.assign(mapProps, {
            events: this.amapEvents,
            children: (
              <div className='dateSwitch'>
                <DateSwitch date={searchDate} onChange={date => onDateChangeHandle(date, this.draw)}/>
              </div>
            )
        })
    }else if(isGoogleMap){
        Object.assign(mapProps, {
            initEndCallback: this.initEndCallback,
            center: [0, 0],
            needInitMarker: false,
            intiGoogleMapParams: {
              fullscreenControl: false
          }
        })
    }

    return (
        <div className='map'>
          <MapPage {...mapProps} />
          {
              isGoogleMap && 
              <div className='dateSwitch'>
                <DateSwitch date={searchDate} onChange={date => onDateChangeHandle(date, this.draw)}/>
              </div>
          }
        </div>
    );
  }
}